"use client";

import { Handle, Position } from "@xyflow/react";
import Image from "next/image";
import { memo } from "react";

const ImageNode = memo(
  ({ data }: { data: { imageUrl: string; title?: string } }) => {
    return (
      <div className="relative w-52 h-52">
        <Image
          src={data.imageUrl}
          alt="node image"
          layout="fill"
          objectFit="cover"
          className="rounded"
        />
        <Handle type="target" position={Position.Left} />
        <Handle type="source" position={Position.Right} />
        {data.title && (
          <div className="absolute w-full rounded text-center bg-secondary/50">
            {data.title}
          </div>
        )}
      </div>
    );
  }
);

ImageNode.displayName = "ImageNode";

export default ImageNode;
